<template>
  <div class="Register">
    <div class="RegisterBox">
      <div class="box1"></div>
      <div class="box2">
        <h3>注册界面</h3>
        <el-form
          status-icon
          :rules="rules"
          :model="registerForm"
          ref="registerForm"
          style="color: black"
        >
          <el-form-item
            label="用户名"
            name="register"
            label-width="70px"
            prop="username"
          >
            <el-input type="text" v-model="registerForm.username" />
          </el-form-item>
          <el-form-item
            label="密码"
            name="register"
            label-width="70px"
            prop="password"
          >
            <el-input type="password" v-model="registerForm.password" />
          </el-form-item>
          <el-form-item
            label="确认密码"
            name="register"
            label-width="70px"
            prop="confirmPassword"
          >
            <el-input type="password" v-model="registerForm.confirmPassword" />
          </el-form-item>
          <el-form-item
            label="支付密码"
            name="register"
            label-width="70px"
            prop="paypwd"
          >
            <el-input type="password" v-model="registerForm.paypwd" />
          </el-form-item>
          <el-form-item
            label="确认支付密码"
            name="register"
            label-width="70px"
            prop="confirmPaypwd"
          >
            <el-input type="password" v-model="registerForm.confirmPaypwd" />
          </el-form-item>
          <el-form-item label="性别" name="register" label-width="70px" prop="">
            <el-radio v-model="registerForm.gender" :label="0">男</el-radio>
            <el-radio v-model="registerForm.gender" :label="1">女</el-radio>
          </el-form-item>
          <el-form-item
            label="邮箱"
            name="register"
            label-width="70px"
            prop="email"
          >
            <el-input type="text" v-model="registerForm.email" />
          </el-form-item>
          <el-form-item
            label="手机号码"
            name="register"
            label-width="70px"
            prop="phone"
          >
            <el-input type="text" v-model="registerForm.phone" />
          </el-form-item>
          <el-form-item label="地址" name="register" label-width="70px" prop="">
            <el-select
              v-model="province"
              placeholder="请选择省份"
              @change="changeProvince"
              style="width: 155px"
            >
              <el-option
                v-for="(item, index) in address1"
                :key="index"
                :label="item.title"
                :value="item.title"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="city"
              placeholder="请选择市"
              @change="changeCity"
              style="width: 155px"
            >
              <el-option
                v-for="(item, index) in address2"
                :key="index"
                :label="item.title"
                :value="item.title"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="county"
              placeholder="请选择县或区"
              style="width: 155px"
            >
              <el-option
                v-for="(item, index) in address3"
                :key="index"
                :label="item.title"
                :value="item.title"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label=""
            name="register"
            label-width="70px"
            prop="specificArea"
          >
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入具体地址..."
              v-model="registerForm.specificArea"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="客户类型"
            name="register"
            label-width="70px"
            prop=""
          >
            <el-select
              v-model="registerForm.type"
              placeholder=""
              style="width: 100%"
            >
              <el-option :value="1" label="客户"> 客户 </el-option>
              <el-option :value="0" label="茶商"> 茶商 </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="客户类型"
            name="register"
            label-width="70px"
            prop=""
            v-show="!registerForm.type"
          >
            <el-select
              v-model="registerForm.userType"
              placeholder=""
              style="width: 100%"
            >
              <el-option :value="0" label="个体户"> 个体户 </el-option>
              <el-option :value="1" label="有限责任公司">
                有限责任公司
              </el-option>
              <el-option :value="2" label="股份有限公司">
                股份有限公司
              </el-option>
              <el-option :value="3" label="合伙企业"> 合伙企业 </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="验证码"
            name="register"
            label-width="70px"
            prop="verifyCode"
          >
            <el-input type="text" v-model="registerForm.verifyCode" />
          </el-form-item>
          <el-form-item label="" name="register" label-width="70px">
            <div id="v_container"></div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('registerForm')"
              >立即注册</el-button
            >
            <el-button @click="resetForm('registerForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { GVerify } from "../assets/js/verifyCode";
export default {
  name: "Register",
  data() {
    return {
      //注册表单
      registerForm: {
        username: "",
        password: "",
        confirmPassword: "",
        paypwd: "",
        confirmPaypwd: "",
        gender: 0,
        email: "",
        verifyCode: "",
        phone: "",
        address: "",
        specificArea: "",
        type: 1,
        userType: 0,
      },
      address1: require("../assets/js/area"),
      province: "",
      address2: "",
      city: "",
      address3: "",
      county: "",

      //验证规则匹配
      rules: {
        //验证用户名
        username: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入用户名！"));
              } else if (value.length < 3) {
                callback(new Error("输入长度不够！"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        //验证密码
        password: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入密码！"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        //支付密码
        paypwd: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入支付密码！"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        //验证码
        verifyCode: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入验证码！"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        //验证确认密码
        confirmPaypwd: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请再次输入密码"));
              } else if (value !== this.registerForm.paypwd) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        //验证确认支付密码
        confirmPassword: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请再次输入支付密码"));
              } else if (value !== this.registerForm.password) {
                callback(new Error("两次输入支付密码不一致!"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        //验证注册邮箱
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        //验证手机号
        phone: [
          {
            validator: (rule, value, callback) => {
              var phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
              if (phoneReg.test(value)) {
                callback();
              } else {
                callback(new Error("手机格式错误"));
              }
            },
            trigger: "blur",
          },
        ],
        specificArea: [
          {
            validator: (rule, value, callback) => {
              if (value == "") {
                callback(new Error("填好地址啊！！"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //提交按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid && this.registerForm.address.trim() !== "") {
          // console.log("register。。。。。。",this.registerForm)
          // 登录获取验证码
          const that = this;
          var verifyCode = this.registerForm.verifyCode;
          var verifyFlag = this.verifyCode.validate(verifyCode);
          if (!verifyFlag) {
            that.$notify.error({
              title: "系统提示",
              message: "验证码输入错误",
            });
            return;
          } else {
            that.$notify({
              title: "系统提示",
              message: "验证码输入正确",
              type: "success",
            });
          }
          //表单数据都有效
          //普通客户注册
          if (this.registerForm.type) {
            const {
              username,
              password,
              paypwd,
              gender,
              email,
              phone,
              address,
              type,
            } = this.registerForm;
            const p1 = new Promise((resolve, reject) => {
              axios
                .post("http://localhost:3000/user/normalRegister", {
                  username,
                  password,
                  paypwd,
                  gender,
                  email,
                  phone,
                  address,
                  type,
                })
                .then(
                  (value) => resolve(value),
                  (reason) => reject(reason)
                );
            });
            p1.then(
              (value) => {
                alert(value.data.msg);
                this.$router.replace({
                  name: "login",
                });
              },
              (reason) => {
                console.log(reason);
              }
            );
          }

          //茶商注册
          if (!this.registerForm.type) {
            const {
              username,
              password,
              gender,
              email,
              phone,
              address,
              type,
              userType,
            } = this.registerForm;
            const p1 = new Promise((resolve, reject) => {
              axios
                .post("http://localhost:3000/user/merchantRegister", {
                  username,
                  password,
                  gender,
                  email,
                  phone,
                  address,
                  type,
                  userType,
                })
                .then(
                  (value) => resolve(value),
                  (reason) => reject(reason)
                );
            });
            p1.then(
              (value) => {
                alert(value.data.msg);
                // console.log(value)
                this.$router.replace({
                  name: "login",
                });
              },
              (reason) => {
                console.log(reason);
              }
            );
          }
        } else {
          console.log("error submit!");
          return false;
        }
      });
    },
    //切换省份
    changeProvince() {
      this.city = "";
      this.county = "";
      // console.log("6666666")
      this.address2 = this.address1.filter((item) => {
        return this.province === item.title;
      });
      // console.log(this.address2[0].children)
      this.address2 = this.address2[0].children;
    },
    //切换市
    changeCity() {
      this.county = "";
      this.address3 = this.address2.filter((item) => {
        return this.city == item.title;
      });
      this.address3 = this.address3[0].children;
    },
    //重置按钮
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.province = "";
      this.city = "";
      this.county = "";
    },
  },
  mounted() {
    //验证码
    this.verifyCode = new GVerify("v_container");
    // console.log("address:",this.address)
  },
  updated() {
    //整合地址
    this.registerForm.address =
      this.county === "" && this.registerForm.specificArea !== ""
        ? ""
        : this.province +
          "省" +
          this.city +
          "市" +
          this.county +
          this.registerForm.specificArea;
  },
};
</script>

<style scoped lang='less'>
.Register {
  width: 100%;
  // height: 100%;
  min-height: 650px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  .RegisterBox {
    width: 1100px;
    min-height: 650px;
    border: 1px solid rgb(209, 207, 207);
    text-align: center;
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    .box1 {
      width: 500px;
      // height: 100%;
      background: url("../assets/img/tea.jpg") no-repeat;
      background-size: cover;
    }
    .box2 {
      width: 550px;
      height: 100%;
    }
  }
}
</style>